import { Component } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  React 事件：事件对象
  应用场景：
    1. 获取鼠标的坐标值，获取键盘按键，阻止冒泡，阻止默认行为

  React 事件：事件传值
  用法：
    包一层箭头函数，在箭头函数中，调用处理函数。    

*/
class App extends Component {
  handleClick = (e, params) => {
    console.log('事件对象', e);
    console.log('其他参数', params);
  };

  // 阻止默认行为
  noLink = (e) => {
    e.preventDefault();
  };

  render() {
    return (
      <>
        {/* 事件传值 */}
        <button onClick={(e) => this.handleClick(e, '其他参数')}>点我2</button>
        {/* 默认传事件对象 */}
        <a onClick={this.noLink} href='http://www.itcast.cn'>
          阻止默认行为
        </a>
      </>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
